<template>
  <div ref="stationDetail">123</div>
  <!-- <Modal
    id="substationDetail"
    ref="substationDetail"
    v-model="modSta"
    title="详情"
  >
    当前选择的站点ID是：{{ detailId }}
    <Divider orientation="left">详情列表</Divider>
    <ul>
      <li v-for="(value, key) in list" :key="value">{{ key }} : {{ value }}</li>
    </ul>
    <Divider orientation="left">可修改参数</Divider>
    <XInput v-model="list.short" placeholder="简称"
      ><span slot="prepend">简称</span></XInput
    >
    <XInput v-model="list.full" placeholder="全称"
      ><span slot="prepend">全称</span></XInput
    >
    <XInput v-model="list.adress" placeholder="详细地址"
      ><span slot="prepend">详细地址</span></XInput
    >
    <XInput v-model="list.responsor" placeholder="联系人"
      ><span slot="prepend">联系人</span></XInput
    >
    <XInput v-model="list.phone" placeholder="联系人电话"
      ><span slot="prepend">联系人电话</span></XInput
    >
    <XInput v-model="list.mail" placeholder="联系人电子邮件"
      ><span slot="prepend">联系人电子邮件</span></XInput
    >
    <Select v-model="list.voltage" placeholder="电压等级">
      <Option value="500">500</Option>
      <Option value="220">220</Option>
      <Option value="110">110</Option>
      <Option value="35">35</Option>
      <Option value="0">0</Option>
    </Select>
    <XInput v-model="list.owner" placeholder="产权单位"
      ><span slot="prepend">产权单位</span></XInput
    >
    <XInput v-model="list.maintainer" placeholder="运维单位"
      ><span slot="prepend">运维单位</span></XInput
    >
    <Select v-model="list.grade" placeholder="调度等级">
      <Option value="0">一级网</Option>
      <Option value="1">二级网</Option>
      <Option value="2">三级网</Option>
      <Option value="3">四级网</Option>
      <Option value="4">五级网</Option>
    </Select>
    <XInput v-model="list.longitude" placeholder="经度"
      ><span slot="prepend">经度</span></XInput
    >
    <XInput v-model="list.latitude" placeholder="纬度"
      ><span slot="prepend">纬度</span></XInput
    >
    <XSwitch v-model="list.status" true-value="0" false-value="1"
      ><span slot="prepend">状态</span></XSwitch
    >
    <Select v-model="list.type" placeholder="类型">
      <Option value="变电站">变电站</Option>
      <Option value="电厂">电厂</Option>
      <Option value="用户变">用户变</Option>
    </Select>
    <Card>
      <p slot="title">当前变电站关联的监测设备</p>
      <div v-for="(dev, index) in list.devs" :key="index">
        第{{ index + 1 }}个检测设备是：
        <p>device_name是:{{ dev.device_name }}</p>
        <p>device_id是:{{ dev.device_id }}</p>
      </div>
    </Card>
    <Button type="primary" @click.native="edit">提交</Button>
  </Modal> -->
</template>
<script>
// import {
//   Modal,
//   Divider,
//   Button,
//   Input,
//   Select,
//   Option,
//   Switch,
//   Card
// } from "iview";
export default {
  name: "SubstationDetail",
  props: {
    detailModSta: {
      type: Boolean,
      required: true
    }, //模态框状态
    detailId: {
      type: String,
      required: true
    } //详情id
  },
  data() {
    return {
      modSta: this.detailModSta, //模态框状态
      list: {}, //详情列表
      wlanstacompVal: "" //接入设备、通信设备厂商
    };
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    //编辑
    edit() {
      let obj = this.list;
      this.$axios.post("/substation/edit", obj).then(res => {
        if (res.data) {
          this.$Message.success("修改成功");
        } else {
          this.$Message.error("修改失败");
        }
      });
    }
  },
  watch: {
    detailModSta(newVal) {
      let _self = this;
      this.modSta = newVal;
      //获取详情列表
      let obj = {
        id: this.detailId
      };
      this.$axios.post("/substation/detail", obj).then(res => {
        _self.list = res.data;
      });
    }, //父组件值改变修改子组件值
    modSta(newVal) {
      this.$emit("updateModSta", newVal);
    } //子组件值改变提交给父组件
  },
  components: {
    // Modal,
    // Divider,
    // Button,
    // XInput: Input,
    // Select,
    // Option,
    // XSwitch: Switch,
    // Card
  }
};
</script>
